<template>
        <div>

            <mh></mh>

          <main class="" id="main-collapse">
            <div>


              注册页面
              <!-- 声明表单 绑定错误提示 绑定规则 绑定数据 -->

              <Form
        ref="form"
        :showErrorTip="showErrorTip"
        :rules="rules"
        :model="model"
      >
<FormItem label="用户名" prop="username">
  <template v-slot:label>  用户名 </template>
  <input type="text" v-model="model.username">
</FormItem>
<FormItem label="密码"  prop="password">
  <input type="password" v-model="model.password">
</FormItem>
<FormItem label="验证码" prop="code">
  <input type="text" v-model="model.code" /> <img :src="src" @click="chageImgCode" />
</FormItem>
<FormItem>
  <Button color="primary" :loading="isLoading" @click="submit">提交</Button>&nbsp;&nbsp;&nbsp;
  <Button @click="reset">重置</Button>
</FormItem>
</Form>

            </div>

          </main>


        </div>
      </template>



      <script>


      import mh from './mh.vue'

      export default {
        data () {
          return {
            msg: "这是一个变量",
            //进度条
            isLoading:false,
            //用户数据
            model:{
                username:'',
                password:'',
                code:''
            },
            src:"http://127.0.0.1:8000/app01/mycode/",
            //规则
            rules:{
                //非空验证
                required:['username','password']
            },
            //错误提示
            showErrorTip:true

          }
        },
        components: {
              'mh':mh
        },
        mounted:function(){

      },
        methods:{
            //点击刷新验证码
            chageImgCode(){

              //生成随机字符
              let num = Math.ceil(Math.random()*10);
              this.src = this.src + "?code=" + num;

            },
            //提交
            submit(){

                //取值
                let username = this.model.username;
                let password = this.model.password;

                if(username == ''){

                  this.$Message('用户名不能为空');
                  return false;

                }

                //请求后台接口
                //定义一个传递变量
                var _this = this;
                this.axios.get('http://localhost:8000/app01/register/',{
                    //设置参数
                    params:{
                        username:username,
                        password:password,
                        code:this.model.code
                    }
                }).then(function(result){

                    //判断是否注册成功

                    if(result.data.code==200){

                        //跳转页面
                        _this.$router.push('/login');


                    }else{

                    //alert(result.data.message);
                    //组件式提醒

                    //_this.$Notice(result.data.message);
                    _this.$Message(result.data.message);

                    }



                });


            },
            //重置
            reset(){

                //将内容置空
                this.model.username = '';
                this.model.password = '';

            }


        }
      }


      </script>

      <style>



      </style>
